import React, { forwardRef, useState, useEffect } from 'react'
import './Veterinary.scss'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
const Veterinary = forwardRef((props, ref) => {
    const [infodata, setdata] = useState([])
    const getdata = () => {
        // setdata(ref)

    }

    const drawbar = () => {
        var myChart = echarts.init(document.getElementById("Veterinary_barli"));
        var option = {
            //你的代码
            title: {
                text: "历年经济增长",
                textStyle: {
                    fontSize: 25,
                    color: "#fff"
                },
            },
            //  backgroundColor: "#001829",
            grid: { containLabel: true, top: 100, right: 15, bottom: 0, left: 15 },
            legend: {
                show: true,
                data: ['营收金额', '同比增长'],
                textStyle: { fontSize: 18, color: '#ffffff' },
            },
            tooltip: {
                trigger: "axis",
                axisPointer: { type: "shadow" }
            },
            xAxis: {
                type: "category",
                data: ['2022年', '2021年', '2020年', '2019年', '2018年'],
                axisLine: {
                    show: true,
                    lineStyle: { color: "#7097B8", type: "solid" }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    fontSize: 14,
                    color: "#7097B8",
                    fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN"
                }
            },
            yAxis: [
                {
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        show: true,
                        fontSize: 14,
                        color: "#7097B8",
                        fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
                        formatter: '{value} 万元'
                    },
                    splitLine: { show: false }
                },
                {
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        show: true,
                        fontSize: 14,
                        color: "#7097B8",
                        fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
                        formatter: '{value} %'
                    },
                    splitLine: { show: false }
                },
            ],
            series: [
                {
                    name: '营收金额',
                    type: "bar",
                    barWidth: "50%",
                    showBackground: true,
                    backgroundStyle: {
                        color: "rgba(14,58,99, .5)"
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "rgba(3, 255, 150, 1)" },
                            { offset: 1, color: "rgba(0, 251, 255, 0)" }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: "#83bff6" },
                                { offset: 1, color: "#2378f7" }
                            ])
                        }
                    },
                    data: [1232, 2366, 2254, 1327, 1188]
                },
                {
                    name: "同比增长",
                    type: "line",
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: "#FFA600", //改变折线颜色
                            },
                        },
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [  // 渐变颜色
                                {
                                    offset: 0,
                                    color: 'rgba(255, 166, 0, 0.3)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255, 166, 0, 0.5)',
                                },
                            ],
                            global: false,
                        },
                    },
                    smooth: false,
                    showAllSymbol: true,
                    symbol: "emptyCircle",
                    symbolSize: 6,
                    data: [1, 1.2, 3, 1, 1.5, 1]
                }

            ]
        };


        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }
    const drawbar2 = () => {

        // ['IT信息技术1', '物流', '电子通信', '服务业', '护理', '餐饮', '监测']
        let colorList = ['#FF4B01', '#FF7B00', '#FFE823', '#2379FF', '#2379FF', '#FFD37A', '#FFD37A']
        let result = [
            { name: 'IT信息技术', value: 580 },
            { name: '物流', value: 536 },
            { name: '电子通信', value: 500 },
            { name: '服务业', value: 350 },
            { name: '护理', value: 300 },
            { name: '餐饮', value: 300 },
            { name: '监测', value: 300 },
        ]
        var myChart = echarts.init(document.getElementById("Veterinary_barli2"));
        var option = {
            color:colorList,
            title: {
                text: "就业热门排名Top7",
                textStyle: {
                    fontSize: 25,
                    color: "#fff"
                },
            },
            // backgroundColor: '#000416',
            tooltip: {
                show: true,
                trigger: 'item',
                padding: [8, 15],
                backgroundColor: 'rgba(12, 51, 115,0.8)',
                borderColor: 'rgba(3, 11, 44, 0.5)',
                textStyle: {
                    color: 'rgba(255, 255, 255, 1)'
                },
            },
            legend: {
                show: false,
            },
            grid: {
                left: '15%',
                right: '16%',
                top: '15%',
                bottom: '8%',
            },
            xAxis: [
                {
                    splitLine: {
                        show: false,
                    },
                    type: 'value',
                    show: false,
                },
            ],
            yAxis: [
                {
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    type: 'category',
                    axisTick: {
                        show: false,
                    },
                    inverse: true,
                    data: result.map((item)=>item.name),
                    axisLabel: {
                        color: '#f0f0f',
                        fontSize: 14,
                        margin: 10,
                        formatter: (name, index) => {
                            const id = index + 1;
                            if (id < 4) {
                                return `{icon${id}|${id}}`;
                             } else {
                                return `{count|${id}}`;
                             }
                        },
                        rich: {
                            icon1: {
                                width: 30,
                                height: 25,
                                padding: [5, 0, 2, 0],
                                align: 'center',
                                backgroundColor: '#FF4B01',
                                color: '#ffffff',
                                fontSize: 20,
                            },
                            icon2: {
                                width: 30,
                                height: 25,
                                padding: [5, 0, 2, 0],
                                align: 'center',
                                backgroundColor: '#FF7B00',
                                color: '#ffffff',
                                fontSize: 20,
                            },
                            icon3: {
                                width: 30,
                                height: 25,
                                padding: [5, 0, 2, 0],
                                align: 'center',
                                backgroundColor: '#FFD000',
                                color: '#ffffff',
                                fontSize: 20,
                            },
                            count: {
                                width: 30,
                                height: 25,
                                padding: [5, 0, 2, 0],
                                align: 'center',
                                backgroundColor: '#2379FF',
                                color: '#ffffff',
                                fontSize: 20,
                            }
                        },
                    },
                },
                {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                        formatter: function (value) {
                            return value + '人';
                        },
                    },
                    data: result.map((item)=>item.value),
                },
            ],
            series: [
                {
                    name: '',
                    type: 'bar',
                    barWidth: 10, // 柱子宽度
                    MaxSize: 0,
                    showBackground: true,
                    barBorderRadius: [30, 0, 0, 30],
                    backgroundStyle: {
                        color:'#194B72',
                    },
                     label: {
                        show: true,
                        offset: [10, -16],
                        color: '#ff0f',
                        fontWeight: 500,
                        position: 'left',
                        align: 'left',
                        formatter: function (params) {
                            console.log(params)
                            return params.data.name;
                        }
                    },
                    data: result.map((item,index)=>{
                        return{
                            name:item.name,
                            value:item.value,
                            itemStyle:{
                                barBorderRadius: [30, 0, 0, 30],
                                color:{
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#0F1F45",
                                        },
                                        {
                                            offset: 1,
                                            color: colorList[index],
                                        },
                                    ],
                                   }
                            }
                        }
                    }),
                },
                {
                    name: "外圆",
                    type: "scatter",
                    emphasis: {
                        scale: false,
                    },
                    symbol: "rect",
                    symbolSize: [5,16],// 进度条白点
                    itemStyle: {
                        barBorderRadius: [30, 0, 0, 30],
                        color: '#FFF',
                        shadowColor: "rgba(255, 255, 255, 0.5)",
                        shadowBlur: 5,
                        borderWidth: 1,
                        opacity: 1,
                    },
                    z: 2,
                    data: result,
                    animationDelay: 500,
                },
            ],
        };
        
        

        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }

    useEffect(() => {
        drawbar()
        drawbar2()
        console.log(infodata);
        getdata()

    }, [])
    // console.log(ref);
    return (
        <div className='Veterinary_showli'>
            {/* {drawlist()} */}
            <div id='Veterinary_barli'></div>
            <div id='Veterinary_barli2'></div>
        </div>
    )
})

export default Veterinary